<template>
	<view>
		<infoswiper :list="infoList.slide" :vrurl="infoList.vrurl" :isvr="true"></infoswiper>
		<view class="goods-box">
			<view class="vrcard" >
				<view class="" @click="govr(infoList.vrurl)">
					<image src="/static/vrcard.png" mode="widthFix"></image>
				</view>
				<image @click="govideo(infoList.video)" src="/static/videodetails.jpg" mode="widthFix"></image>
			</view>
			<view class="box-title ellipsis2">
				{{infoList.name}}
			</view>
			<view class="box-rate">
				<u-rate count="5" :readonly="true" v-model="rate"></u-rate>
			</view>

			<view class="goods-content">
				<view class="fbox fbox-acenter fbox-jbetween">
					<view class="title fbox fbox-acenter">
						<image src="/static/information/line.png" mode="widthFix"></image>
						<text class="color3 f36">lntroduction</text>
					</view>
				</view>
				<view class="">
					<u-parse class="parse" :html="infoList.brief" @linkpress="onlinkTap"></u-parse>
				</view>
			</view>
			<view class="fbox fbox-jbetween" style="padding: 20rpx 30rpx;">
				<view class="date">
					weight:{{infoList.weight}}
				</view>
				<view class="date">
					sales:{{infoList.sold}}
				</view>
				<view class="date">
					inventory:{{infoList.stock}}
				</view>
			</view>
			<!-- <likes :isLike="infoList.isLike" :id="id" :likeAvatars="likeList" @init="getdetails" :likeNum="likeNum">
			</likes> -->
			<opinion :opinioninfo="opinioninfo" :thumbup="thumbup" :id="id" :thumbdown="thumbdown" @init="getopinion">
			</opinion>
			<report :id="infoList.id"></report>
			<u-tabs itemStyle="width: 25%; padding:10px 15px 0 15px;height: 36px;" :list="list1" @click="click">
			</u-tabs>
			<view>
				<view style="padding: 20rpx 30rpx;" v-if="index == 0">
					<u-parse class="parse" :html="infoList.detail" @linkpress="onlinkTap"></u-parse>
				</view>
				<view style="padding: 20rpx 30rpx;" v-if="index == 1">
					<u-album :urls="infoList.parameter" multipleSize="160" rowCount="2" keyName=""></u-album>
				</view>
				<view style="padding: 20rpx 0rpx;" v-if="index == 2">
					<comments class="comments" :id="id" type="goods" :ishide="false" @init="getcomment" :commentList="commentList"
						@getcomment="getcomment">
					</comments>
				</view>
			</view>
			<zero-back-top :scrollTop="scrollTop"></zero-back-top>
			<tabbar type="goods" :commentlength="commentList.length" :isLike="infoList.isLike"
				:isCollection="infoList.isCollect" @init="getdetails" :id="id" :likeNum="likeNum"></tabbar>
			<u-modal :show="show" :cancelText="cancelText" @confirm="confirm" @cancel="cancel"
				:confirmText="confirmText" :title="title" :showCancelButton="true" :content='content'></u-modal>
		</view>
	</view>
</template>

<script>
	import report from "@/components/report.vue"
	import infoswiper from "@/components/infoswiper.vue"
	import likes from "@/components/likes.vue"
	import opinion from "@/components/opinion.vue"
	import comments from "@/components/comments.vue"
	import tabbar from "@/components/tabbar.vue"
	export default {
		components: {
			infoswiper,
			likes,
			opinion,
			report,
			comments,
			tabbar,
		},
		data() {
			return {
				rate: 5,
				id: '',
				infoList: [],
				likeList: [],
				commentList: [],
				opinioninfo: {},
				thumbup: '50',
				thumbdown: '50',
				scrollTop: 0,
				list1: [{
					name: this.$t('Business.Details'),
				}, {
					name: this.$t('Business.Photos'),
				}, {
					name: this.$t('Business.Comments')
				}],
				index: 0,
				likeNum: '0',
				show: false,
				urllinke: '',
				cancelText: this.$t('user.cancel'),
				confirmText: this.$t('user.yes'),
				content: this.$t('user.open'),
				title: this.$t('user.prompt'),
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		onLoad(e) {
			this.id = e.id
			console.log(e)
			this.getdetails()
			this.getopinion()
			this.getcomment()

		},
		methods: {
			govideo(url){
				uni.navigateTo({
					url:'/pages/video?url=' + url
				})
			},
			cancel() {
				this.show = false
			},
			confirm() {
				this.show = false
				plus.runtime.openURL(this.urllinke)
			},
			onlinkTap(e) {
				e.ignore()
				console.log(e)
				this.show = true
				this.urllinke = e.href
			},
			govr(url) {
				uni.navigateTo({
					url: '/pages/VR/index?url=' + url
				})
			},
			click(item) {
				console.log('item', item);
				this.index = item.index
			},
			getcomment() {
				const params = {
					map: 'applet_city_shop_comment_list',
					sid: this.id
				}
				this.$Request({
					method: 'GET',
					data: params
				}).then(res => {
					console.log(res)
					if (res.data.ec == 200) {
						this.commentList = res.data.data
					} else {

					}
				})
			},
			getopinion() {
				const params = {
					map: 'applet_information_support_get',
					aid: this.id
				}
				this.$Request({
					method: 'GET',
					data: params
				}).then(res => {
					if (res.data.ec == 200) {
						console.log(res, 'opinion')
						this.opinioninfo = res.data.data
						let num = Number(this.opinioninfo.ai_support_no_num) + Number(this.opinioninfo
							.ai_support_num)
						if (num == 0) {
							return
						}
						let calculate1 = Number(this.opinioninfo.ai_support_no_num) / num
						let calculate2 = Number(this.opinioninfo.ai_support_num) / num
						this.thumbup = Number(calculate1 * 100).toFixed(0)
						this.thumbdown = Number(calculate2 * 100).toFixed(0)
					} else {

					}
				})
			},
			getdetails() {
				let params = {
					map: "applet_goods_detail",
					gid: this.id
				}
				this.$Request({
					method: 'GET',
					data: params
				}).then(res => {
					if (res.data.ec == 200) {
						console.log(res, '2222')
						this.infoList = res.data.data
						this.likeNum = String(this.infoList.likeNum || 0)
						if (res.data.data.likeList.length < 1) {
							return
						} else {
							res.data.data.likeList.avatar.map(item => {
								let img = {
									avatar: item
								}
								this.likeList.push(img)
							})
						}

					} else {

					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.goods-box {
		width: 100%;
		margin-top: -100rpx;
		z-index: 2;
		position: absolute;
		border-radius: 20rpx 20rpx 0 0;
		overflow: hidden;
		background-color: #FFFFFF;

		.album {
			@include flex;
			align-items: flex-start;

			&__avatar {
				background-color: $u-bg-color;
				padding: 5px;
				border-radius: 3px;
			}

			&__content {
				margin-left: 10px;
				flex: 1;
			}
		}

		.vrcard {
			position: absolute;
			top: 25rpx;
			right: 30rpx;

			image {
				width: 80rpx;
				height: 55rpx;
			}
		}

		.date {
			padding: 5rpx 10rpx;
			background-color: #eeeeee;
			font-size: 24rpx;
			color: #999;
			border-radius: 10rpx;
		}

		.goods-content {
			padding: 0rpx 30rpx 0;

			.title {
				padding: 30rpx 0;
				font-weight: bold;

				image {
					width: 8rpx;
					margin-right: 20rpx;
				}
			}

			.parse {
				font-size: 26rpx;
			}
		}

		.box-title {
			width: 350rpx;
			text-align: center;
			margin: 0 auto;
			font-weight: bold;
			font-size: 34rpx;
			padding: 20rpx 30rpx;
		}

		.box-rate {
			width: 210rpx;
			margin: 0 auto;
		}

		.trash {
			padding: 5rpx 20rpx;
			background-color: #00aaff;
			border-radius: 20rpx;
			font-size: 24rpx;
			color: #fff;
			margin-top: 10rpx;
		}
	}
</style>
